<template>
  <div class="chart-container">
    <div class="chart-header">
      <!-- <h2 class="chart-title">注册量趋势</h2> -->
      <div class="chart-controls">
        <!-- <el-select
          v-model="selectedChannel"
          clearable
          placeholder="不限渠道"
          class="channel-select"
          size="small"
        >
          <el-option
            v-for="item in channelOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
          size="small"
        >
        </el-date-picker> -->
      </div>
    </div>
    <div
      :class="className"
      :style="{ height: height, width: '100%' }"
      class="chart"
    />
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/theme/macarons"; // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
    selSystemDataActiveList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      selectedChannel: "",
      dateRange: [],
      formattedDates: [],
      resumeRefreshData: [],
      jobPublishData: [],
      jobRefreshData: [],
      resumeSubmitData: [],
      resumeDownloadData: [],
      memberLoginData: [],
      channelOptions: [
        { id: 1, name: "不限渠道" },
        { id: 2, name: "APP" },
        { id: 3, name: "手机浏览器" },
        { id: 4, name: "微信浏览器" },
        { id: 5, name: "微信小程序" },
        { id: 6, name: "抖音小程序" },
        { id: 7, name: "电脑浏览器" },
        { id: 8, name: "系统" },
      ],
    };
  },
  watch: {
    selSystemDataActiveList(newVal, oldVal) {
      if (newVal.length > 0) {
        this.processData();
        this.initChart();
      }
    },
    selectedChannel() {
      // 根据选择的渠道更新图表数据
    },
    dateRange() {
      // 根据选择的日期范围更新图表数据
    },
  },
  mounted() {
    if (this.selSystemDataActiveList.length > 0) {
      this.processData();
      this.initChart();
    }
  },
  methods: {
    processData() {
      // 从时间戳格式化日期为x轴数据
      this.formattedDates = this.selSystemDataActiveList[0]
        ? this.selSystemDataActiveList[0]
            .map((timestamp) => this.$options.filters.formatDate(timestamp))
            .reverse()
        : [];

      // 处理每个系列的数据
      this.resumeRefreshData = this.selSystemDataActiveList[1]
        ? [...this.selSystemDataActiveList[1]].reverse()
        : [];
      this.jobPublishData = this.selSystemDataActiveList[2]
        ? [...this.selSystemDataActiveList[2]].reverse()
        : [];
      this.jobRefreshData = this.selSystemDataActiveList[3]
        ? [...this.selSystemDataActiveList[3]].reverse()
        : [];
      this.resumeSubmitData = this.selSystemDataActiveList[4]
        ? [...this.selSystemDataActiveList[4]].reverse()
        : [];
      this.resumeDownloadData = this.selSystemDataActiveList[5]
        ? [...this.selSystemDataActiveList[5]].reverse()
        : [];
      this.memberLoginData = this.selSystemDataActiveList[6]
        ? [...this.selSystemDataActiveList[6]].reverse()
        : [];
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }

      try {
        this.chart = echarts.init(this.$el.querySelector(".chart"));
        this.chart.setOption({
          title: {
            text: "活跃度分析",
            textStyle: {
              color: "#333",
              fontWeight: "bold",
            },
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [
              "刷新简历",
              "发布职位",
              "刷新职位",
              "投递简历",
              "下载简历",
              "会员登录",
            ],
            textStyle: {
              color: "#333",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.formattedDates,
            axisLine: {
              lineStyle: {
                color: "#333",
              },
            },
            axisLabel: {
              color: "#333",
            },
          },
          yAxis: {
            type: "value",
            max: 70,
            textStyle: {
              color: "#333",
            },
            axisLine: {
              lineStyle: {
                color: "#333",
              },
            },
            axisLabel: {
              color: "#333",
            },
            splitLine: {
              lineStyle: {
                color: "#eee",
              },
            },
          },
          series: [
            {
              name: "刷新简历",
              type: "line",
              data: this.resumeRefreshData,
              itemStyle: { color: "#5470c6" },
            },
            {
              name: "发布职位",
              type: "line",
              data: this.jobPublishData,
              itemStyle: { color: "#ee6666" },
            },
            {
              name: "刷新职位",
              type: "line",
                data: this.jobRefreshData,
              itemStyle: { color: "#3ba272" },
            },
            {
              name: "投递简历",
              type: "line",
              data: this.resumeSubmitData,
              itemStyle: { color: "#fac858" },
            },
            {
              name: "下载简历",
              type: "line",
              data: this.resumeDownloadData,
              itemStyle: { color: "#73c0de" },
            },
            {
              name: "会员登录",
              type: "line",
              data: this.memberLoginData,
              itemStyle: { color: "#9a60b4" },
            },
          ],
        });

        // 添加窗口大小变化时的自适应处理
        window.addEventListener("resize", () => {
          this.chart.resize();
        });
      } catch (error) {
        console.error("初始化活跃度图表出错:", error);
      }
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
      window.removeEventListener("resize", this.chart.resize);
    }
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.chart-header {
  position: absolute;
  right: 10px;
  top: 15px;
  z-index: 999;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.chart-controls {
  display: flex;
  gap: 10px;
}

.channel-select {
  width: 120px;
}

.date-picker {
  width: 260px;
}

.chart {
  height: 400px;
  width: 100% !important;
}
</style>
